<template>
  <div>
    <el-dialog v-el-drag-dialog :title="isEdit ? 'Update File' : 'Create File'" width="75%" :visible.sync="dialogVisible">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="100px" class="form-style">
        <el-form-item label="Category" prop="category">
          <el-select v-model="form.category" filterable clearable class="filter-item" placeholder="Please select">
            <el-option v-for="item in categories" :key="item.code" :label="item.text" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="File Name" prop="fileName">
          <el-input v-model="form.fileName" clearable maxlength="150" show-word-limit />
        </el-form-item>
        <el-form-item label="File Size" prop="fileSize">
          <el-input-number v-model="form.fileSize" :precision="1" :step="0.5" />
          <el-select v-model="form.unit" style="width:65px;">
            <el-option v-for="unit in units" :key="unit.key" :label="unit.key" :value="unit.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="MD5" prop="md5">
          <el-input v-model="form.md5" clearable maxlength="64" show-word-limit />
        </el-form-item>
        <el-form-item label="Store Path" prop="physicalAddress">
          <el-input v-model="form.physicalAddress" clearable maxlength="255" show-word-limit />
        </el-form-item>
        <el-form-item label="Description" prop="description">
          <el-input v-model="form.description" :autosize="{ minRows: 3, maxRows: 5 }" type="textarea" placeholder="please input" maxlength="255" show-word-limit />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button v-loading="loading" type="primary" @click="submitForm">Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { createOrUpdateLogicFile } from '@/api/usr/logic-file'
import waves from '@/directive/waves' // waves directive
import elDragDialog from '@/directive/el-drag-dialog'

const defaultForm = {
  category: '1',
  description: '',
  emptyDir: true,
  fileName: '',
  fileSize: 0,
  isDir: true,
  md5: '',
  parentPath: '/',
  physicalAddress: '',
  unit: 'KB'
}

export default {
  name: 'LogicFile',
  directives: { waves, elDragDialog },
  data() {
    return {
      form: {},
      isEdit: false,
      dialogVisible: false,
      rules: {
        fileName: [{ required: true, message: 'File Name is required', trigger: 'blur' }],
        fileSize: [{ required: true, message: 'File Size is required', trigger: 'blur' }],
        category: [{ required: true, message: 'Category is required', trigger: 'change' }]
      },
      loading: false,
      units: [{ key: 'KB', value: 1 }, { key: 'MB', value: 1024 }, { key: 'GB', value: 1024 * 1024 }]
    }
  },
  computed: {
    ...mapGetters(['uid', 'dictionaries']),
    categories() {
      return this.dictionaries.filter(dict => dict.dictGroup === 'file_category')
    }
  },
  created() {
    this.$on('open', function(isEdit, row) {
      this.isEdit = isEdit
      this.dialogVisible = true
      this.form = Object.assign({}, defaultForm, { spaceId: row.spaceId, parentPath: row.parentPath, uid: this.uid })
      if (isEdit) {
        this.form = Object.assign({}, row, { category: row.category.toString(), unit: 'KB' }, { createAt: undefined, modifyAt: undefined })
      }
    })
  },
  methods: {
    submitForm() {
      console.log(this.form)
      debugger
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.form.fileSize = this.form.fileSize * this.form.unit
          createOrUpdateLogicFile(this.form)
            .then(response => {
              this.$notify({
                title: 'Success',
                message: 'save successfully',
                type: 'success',
                duration: 2000
              })
              response.result.modifyAt = new Date()
              this.$emit('complete', this.isEdit, response.result)
              this.reset()
              this.dialogVisible = false
            })
            .catch(() => {
              this.loading = false
            })
          this.loading = false
        } else {
          return false
        }
      })
    },
    reset() {
      this.$refs['dataForm'].resetFields()
    }
  }
}
</script>
